<template>
    <div class="section-home-wrapper">
        <vue-scroll>
            <div class="section-home">
                <!--首页文章-->
                <div class="article-container">
                    <ArticleCard v-for="article in articleList" :value="article" :key="article._id"></ArticleCard>
                    <v-page
                            v-model="homeArticleListPagination.page"
                            :page-size-menu="false"
                            :info="false"
                            :total-row="pagesComputed"
                            :first="false"
                            :last="false"
                            align="center"
                            @page-change="handlePageChange"
                    ></v-page>
                </div>
                <!--首页的小栏目-->
                <Plugs></Plugs>
            </div>
        </vue-scroll>
    </div>
</template>

<script>
  import { GetArticle ,GetArticleCount} from '~/api/blog-api'

  const PUBLISHED = 1
  export default {
    name: 'Home',
    head(){
      return {
        title:'主页'
      }
    },
    computed: {
      pagesComputed () {
        let pages = 1
        if (this.articleTotal) {
          pages = Math.ceil(this.articleTotal / this.homeArticleListPagination.limit)
        }
        // console.log(pages)
        return pages
      }
    },
    data () {
      return {
        articleTotal: '',
        homeArticleListPagination: {
          page: 1,
          limit: 6
        },
        articleList: []
      }
    },
    created () {
      this.getTotalArticle()
      this.getArticleList(this.homeArticleListPagination)
    },
    methods: {
      getTotalArticle () {
        GetArticleCount({ published: PUBLISHED }).then(res => {
          this.articleTotal = res.data
        }).catch(err => {
          console.log(err)
        })
      },
      getArticleList (query) {
        GetArticle(query).then(res => {
          this.articleList = res.data
        }).catch(err => {
          console.log(err)
        })
      },
      handlePageChange (data) {
        this.getArticleList(this.homeArticleListPagination)
      },
    }
  }
</script>

<style>
    /*Home.vue*/
    .section-home-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #f3f6fb;
        overflow: auto;
    }

    .section-home {
        position: relative;
        max-width: 1180px;
        margin: 0 auto;
    }

    .article-container {
        min-height: 100%;
        width: 100%;
        /*border-right: 1px solid #e6e6e6;*/
        padding: 48px 38px;
    }

    /*1200px 以上 plug-container 在右边*/
    @media (min-width: 1200px) {
        .section-home {
            display: flex;
        }

        .article-container {
            width: 66.66%;
        }
    }

    @media (max-width: 992px) {
        .section-home {
            transition: .3s;
        }
    }

    /*1000px 以上的样式*/
    @media (min-width: 992px) {
        .section-home {
            max-width: 1140px;
        }
    }

</style>
